<template>
  <card>
    <Table :columns="columns" :data="tableData" :loading="tableLoading" style="margin-top:30px"  maxHeight="600">
        <template slot="status" slot-scope="{row}">
            <font v-if="row.status == 1">启用</font>
            <font v-else-if="row.status == 0" class="red">禁用</font>
        </template>
        <template slot-scope="{row,index}" slot="option">
            <span type="text" @click="changeeit(row)" class="fontstyle mr-10">修改</span>
            <!-- <span type="text" @click="changstatus(row,'0')" class="fontstyle color-red" v-if="row.status=='1'">禁用</span>
            <span type="text" @click="changstatus(row,'1')" class="fontstyle " v-else >启用</span> -->
        </template>
      </Table>
    <!-- 修该模态框 -->
    <Modal v-model="modalstatus" title="编辑项目素材库" width="500" @on-cancel="changeModal(modalForm)" :mask-closable="false">
        <Form :label-width='130' :ref='modalForm' :model='modalForm' :rules="rules">
            <FormItem label="项目名称：">
                <span>{{modalForm.name}}</span>
            </FormItem>
            <FormItem label="服务器：" prop="vps_id">
                <Select v-model="modalForm.vps_id" style="width:200px" placeholder="请选择素材库部署服务器">
                    <Option v-for="item in serverList" :value="item.id" :key="item.id">{{ item.alias_name }}</Option>
                </Select>
            </FormItem>
            <FormItem label="素材库域名：" prop="sck_domain">
                <Input v-model="modalForm.sck_domain" placeholder=" 如： https://bdimg.jgyljt.com"></Input>
            </FormItem>
            <FormItem label="素材库路径：" prop="sck_path">
                <Input v-model="modalForm.sck_path" placeholder=" /data/wwwroot/bdimg.jgyljt.com"></Input>
            </FormItem>
            <FormItem label="状态：" prop="status">
                <RadioGroup v-model="modalForm.status">
                    <Radio label="0">禁用</Radio>
                    <Radio label="1">启用</Radio>
                </RadioGroup>
            </FormItem>
        </Form>
        <div slot='footer' class="footer">
              <Button @click='canceledit(modalForm)'>取消</Button>
              <Button  type='primary' :loading="subloading" @click='submitedit(modalForm)'>保存</Button>
        </div>
    </Modal>
  </card>
</template>
<script>
    import { settinginfo } from '@api/httpsetting'
    import { getMaterial, materimalupdateInfo, updateStatus, enterStatus } from '@api/materialsetting'
    export default {
        data () {
            return {
                columns: [
                    {
                        title: 'ID',
                        minWidth: 60,
                        align: 'center',
                        render: (h, params) => h('span', params.index + 1)

                    },
                    {
                        title: '项目名称',
                        minWidth: 100,
                        align: 'center',
                        key: 'project'

                    },
                    {
                        title: '素材库域名',
                        minWidth: 230,
                        align: 'center',
                        key: 'sck_domain'

                    },
                    {
                        title: '素材库路径',
                        minWidth: 300,
                        align: 'center',
                        key: 'sck_path'

                    },
                    {
                        title: '状态',
                        // key: 'status_str',
                        minWidth: 70,
                        align: 'center',
                        slot: 'status'
                        // render: (h, params) => {
                        //     return h('span', {
                        //         style: {
                        //             color: params.row.status_str == '启用' ? '#515a6e' : 'red'
                        //         }
                        //     }, params.row.status_str)
                        // }

                    },
                    {
                        title: 'FTP账号',
                        minWidth: 280,
                        align: 'center',
                        key: 'ftp_username'

                    },
                    {
                        title: 'FTP密码',
                        minWidth: 180,
                        align: 'center',
                        key: 'ftp_password'

                    },
                    {
                        title: '更新时间',
                        minWidth: 170,
                        align: 'center',
                        key: 'updated_at'

                    },
                    // {
                    //     title: '操作人',
                    //     minWidth: 100,
                    //     align: 'center',
                    //     key: 'operator'

                    // },
                    {
                        title: '操作',
                        minWidth: 80,
                        align: 'center',
                        slot: 'option',
                        fixed: 'right'
                    }
                ],
                tableData: [],
                tableLoading: false,
                modalstatus: false,
                modalForm: {
                    name: '',
                    project_id: '',
                    vps_id: '',
                    sck_domain: 'https://',
                    sck_path: '',
                    status: '1'

                },
                serverList: [],
                subloading: false,
                rules: {
                    vps_id: [
                        { required: true, message: '请选择素材库部署服务器', trigger: 'change' }
                    ],
                    sck_domain: [
                        { required: true, message: '请输入素材域名', trigger: 'blur' }
                    ],
                    sck_path: [
                        { required: true, message: '请选择素材库路径', trigger: 'blur' }
                    ],
                    status: [
                        { required: true, message: '请选择状态', trigger: 'change,blur' }
                    ]
                }
            }
        },
        created () {
            this._getMaterial();
            this._getseaver()
        },
        methods: {
            // 获取列表数据
            _getMaterial () {
                this.tableLoading = true
                getMaterial({}).then(res => {
                    this.tableData = res;
                    this.tableLoading = false;
                }).catch(() => {
                    this.tableLoading = false
                })
            },
            // 获取部署服务器数据
            _getseaver () {
                settinginfo().then(res => {
                    this.serverList = res.condition.vps_list
                })
            },
            changeeit (row) {
                this.modalForm.name = row.project;
                this.modalForm.project_id = row.project_id;
                this.modalForm.sck_domain = row.sck_domain ? row.sck_domain : this.modalForm.sck_domain;
                this.modalForm.sck_path = row.sck_path;
                this.modalForm.vps_id = row.sck_vps_id;
                this.modalstatus = true;
            },
            // 取消
            canceledit (modalForm) {
                this.$refs[modalForm].resetFields();
                this.modalstatus = false
            },
            submitedit (modalForm) {
                this.$refs[modalForm].validate((valid) => {
                    if (valid) {
                        let params = {
                            project_id: this.modalForm.project_id,
                            vps_id: this.modalForm.vps_id,
                            sck_domain: this.modalForm.sck_domain,
                            sck_path: this.modalForm.sck_path,
                            status: this.modalForm.status
                        }
                        this.subloading = true;
                        materimalupdateInfo(params).then(res => {
                            this.$Message.success('编辑成功');
                            this.subloading = false;
                            this._getMaterial();
                            this.modalstatus = false;
                        }).catch(() => {
                            this.modalstatus = true;
                            this.subloading = false;
                        })
                    } else {
                    }
                })
            },
            // 启用禁用
            changstatus (row, status) {
                this.$Modal.confirm({
                    title: row.status == '1' ? '确定禁用此项目素材' : '确定启用此项目素材',
                    // content: '<p>Content of dialog</p><p>Content of dialog</p>',
                    onOk: () => {
                        if (status == 1) {
                            updateStatus({ status: 1, project_id: row.project_id }).then(res => {
                                this.$Message.info('启用成功');
                                this._getMaterial();
                            }).catch(() => {
                                this.$Message.error('启用失败')
                            })
                        } else {
                            enterStatus({ status: 0, project_id: row.project_id }).then(res => {
                                this.$Message.info('禁用成功');
                                this._getMaterial();
                            }).catch(() => {
                                this.$Message.error('禁用失败')
                            })
                        }
                    },
                    onCancel: () => {
                        // this.$Message.info('取xiao');
                    }
                });
            },
            changeModal (modalForm) {
                this.$refs[modalForm].resetFields()
            }
        }
    }
</script>
<style scoped>
.fontstyle{
    color: #2d8cf0;
    cursor:pointer;
}
.mr-10{
    margin-right: 10px;
}
.color-red{
    color: #f00;
}
/deep/.ivu-card-body{
    padding: 0 16px;
}

</style>
